<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select name="" id="province" onchange="selectCity()">
      <option>--选择省--</option>
      <option>河南省</option>
      <option>辽宁省</option>
      <option>山东省</option>
    </select>
    <select id="city">
      <option>--选择市--</option>
    </select>
    <script>
      function selectCity() {
        //定义一个二维数组，一个数组他的元素也是数组
        const arr = [
          [],
          ['郑州', '洛阳', '开封'],
          ['沈阳', '大连', '鞍山'],
          ['青岛', '济南', '烟台'],
        ];

        //获取省的元素对象
        const provinceElement = document.querySelector('#province');
        //获取市的元素对象
        const cityElement = document.querySelector('#city');

        //选中选项的索引
        const index = provinceElement.selectedIndex;
        //alert(index);

        //根据选中的省份索引查找对应的城市
        const cityArr = arr[index];

        //清空城市下拉选择框
        cityElement.innerHTML = '<option>--选择市--</option>';
        //防止在选省时,显示其他省市

        //遍历城市数组，获取一个省份对应的每一个城市
        for (let x = 0; x < cityArr.length; x++) {
          let s = '<option>' + cityArr[x] + '</option>';
          cityElement.innerHTML += s;
        }
      }
    </script>
  </body>
</html>
